import React, { useState } from 'react'
import style from './leftPanel.module.scss'
import { Button, ButtonProps, Tabs } from 'antd'
import { useAppSelector } from '../../starter/hooks/redux'
import { store } from '../../starter/redux/store'
import CreateEmployee from '../../base/components/CreateEmployee/CreateEmployee'
import CreateProject from '../../base/components/CreateProject/CreateProject'
import { useActions } from '../../starter/hooks/actions'
import { useCreateEmployeesMutation } from '../../starter/api/employeesApi'
import { useCreateProjectsMutation } from '../../starter/api/projectsApi'
import { PlusIcon } from '../../images/icons'
import CardProjectManagerSmall from '../../base/components/CardProjectManagerSmall/CardProjectManagerSmall'
import { useCreateProjectManagerMutation } from '../../starter/api/projectManagersApi'
import CardListEmployees from '../../base/components/CardListEmployees/CardListEmployees'
import CardListProjects from '../../base/components/CardListProjects/CardListProjects'
const LeftPanel = () => {
  const { projectManagers } = useAppSelector(state => state.projectManagers)
  const [createEmployee, {isLoading: isLoadingCreateEmployee, isSuccess: isSuccessCreateEmployee, isError: isErrorCreateEmployee}] = useCreateEmployeesMutation()
  const [createProject, {isLoading: isLoadingCreateProject, isSuccess: isSuccessCreateProject, isError: isErrorCreateProject}] = useCreateProjectsMutation()
  const [createProjectManager, {isLoading: isLoadingCreateProjectManager, isSuccess: isSuccessCreateProjectManager, isError: isErrorCreateProjectManager}] = useCreateProjectManagerMutation()

  const addEmployeeHandler = () => {
    onShowModal(true)
    const buttonSet : ButtonProps[] = [
      {
        type: 'primary',
        onClick: () => {
          const {employee} = {...store.getState().tmp}
          if (employee) {
            createEmployee(employee)
          }
        },
        children: 'Ok'
      },
      {
        onClick: () => onShowModal(false),
        children: 'Cancel'
      }
    ]
    setModalData({
      title: 'Введите данные нового сотрудника',
      content: <CreateEmployee type={'employee'}/>,
      buttonSet,
      footer: buttonSet.map((item, index) => <Button key={index} {...item}/>)
    })
  }
  const addProjectHandler = () => {
    onShowModal(true)
    const buttonSet : ButtonProps[] = [
      {
        type: 'primary',
        onClick: () => {
          const {project} = {...store.getState().tmp}
          if (project) {
            createProject(project)
          }
        },
        children: 'Ok'
      },
      {
        onClick: () => onShowModal(false),
        children: 'Cancel'
      }
    ]
    setModalData({
      title: 'Введите данные нового проекта',
      content: <CreateProject/>,
      buttonSet,
      footer: buttonSet.map((item, index) => <Button key={index} {...item}/>)
    })
  }
  const addProjectManagerHandler = () => {
    onShowModal(true)
    const buttonSet : ButtonProps[] = [
      {
        type: 'primary',
        onClick: () => {
          const {projectManager} = {...store.getState().tmp}
          if (projectManager) {
            createProjectManager(projectManager)
          }
        },
        children: 'Ok'
      },
      {
        onClick: () => onShowModal(false),
        children: 'Cancel'
      }
    ]
    setModalData({
      title: 'Введите данные нового менеджера проектов',
      content: <CreateEmployee type={'projectManager'}/>,
      buttonSet,
      footer: buttonSet.map((item, index) => <Button key={index} {...item}/>)
    })
  }

  const tabItem = [
    {
      label: `Сотрудники`,
      key: `employees`,
      disabled: false,
      children: <CardListEmployees/>,
      addButton: <Button className={ style.addButton } onClick={addEmployeeHandler}>
        <div className={style.plusIcon}>
          <PlusIcon/>
        </div>
      </Button>
    },
    {
      label: `Проекты`,
      key: `projects`,
      disabled: false,
      children: <CardListProjects/>,
      addButton: <Button className={ style.addButton } onClick={addProjectHandler}>
        <div className={style.plusIcon}>
          <PlusIcon/>
        </div>
      </Button>
    },
    {
      label: `ПМ`,
      key: `pm`,
      disabled: false,
      children: <div className={style.employeesList}>{
        projectManagers && projectManagers.map(projectManager => (<CardProjectManagerSmall key={projectManager._id} manager={projectManager}/>))
      }</div>,
      addButton: <Button className={ style.addButton } onClick={addProjectManagerHandler}>
        <div className={style.plusIcon}>
          <PlusIcon/>
        </div>
      </Button>
    }
  ]
  const [selectedTab, setSelectedTab] = useState<any>(tabItem[0])
  const {onShowModal, setModalData} = useActions()


  return (
    <div className={style.wrapper}>
      <div className={style.tabs}>
        {
          tabItem.map(item =>{
            return (
              <div key={item.key} className={`${style.tabItem} ${selectedTab.key === item.key ? style.selected : ''}`} onClick={() => {setSelectedTab(item)}}>
                {item.label}
              </div>
            )
          })
        }
      </div>
      {
        selectedTab.children
      }
      {
        selectedTab.addButton
      }
    </div>
  )
}

export default LeftPanel
